import React from 'react';

/* 
  受控组件 - 表单
    1. value 值如果绑定了数据，默认情况 value 是只读的。
    2. 需要通过 onChange 绑定事件获取表单值和改变表单值。(onChange是React封装过的事件)
    3. 要更新视图，就要通过 this.setState() 更新。
*/

class App extends React.Component{

  state = {
    msg: '你好'
  }

  getValueHandle(e){
    this.setState({ msg : e.target.value })
  }

  render(){
    return (
      <div className="App">
        <input type="text" 
          value={this.state.msg} 
          onChange={ this.getValueHandle.bind(this) } 
        />
        <h2>{this.state.msg}</h2>
      </div>
    );
  }
}

export default App;
